<template>
    <div>
        <div class="head_container">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">
                    <router-link to="/discovery/vip_zone" style="color:black;font-weight:500;font-size:16px"
                        class="link">会员专区</router-link>
                </el-menu-item>
                <el-menu-item index="2">
                    <router-link to="/discovery/video_course" style="color:black;font-weight:500;font-size:16px"
                        class="link">视频课</router-link>
                </el-menu-item>
                <el-menu-item index="3">
                    <router-link to="/discovery/live_course" style="color:black;font-weight:500;font-size:16px"
                        class="link">直播课</router-link>
                </el-menu-item>
                <el-menu-item index="4">
                    <router-link to="/discovery/major_course" style="color:black;font-weight:500;font-size:16px"
                        class="link">线下课</router-link>
                </el-menu-item>
                <el-menu-item index="5">
                    <router-link to="/discovery/zone_list" style="color:black;font-weight:500;font-size:16px"
                        class="link">主题</router-link>
                </el-menu-item>
            </el-menu>
            <router-view></router-view>
        </div>
    </div>

</template>

<script setup lang="ts">
// import RouterLink from 'vue-router'
import { ref } from 'vue'
const activeIndex = ref(localStorage.getItem('index') || "1")
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key);
    localStorage.setItem('index',key);
}
</script>
<style scoped lang="css">
.el-menu-demo {
    font-size: large;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px
}

.link:hover {
    color: black !important;
    text-decoration: none !important;
}
</style>
